import { Segmented } from 'antd';
import { useState } from 'react';
import ComponentAttr from './ComponentAttr/ComponentAttr.tsx';
import ComponentEvent from './ComponentEvent';
import ComponentStyle from './ComponentStyle';
import { useComponentsStore } from "../../stores/components";

export default function Setting() {

    const { currentComponentId } = useComponentsStore();

    const [key, setKey] = useState<string>('属性');

    if (!currentComponentId) return null;

    return <div className={'overflow-scroll h-full' }>
        <Segmented value={key} onChange={setKey} block options={['属性', '样式', '事件']} />
        <div className={'pt-[20px]'}>
            {
                key === '属性' && <ComponentAttr />
            }
            {
                key === '样式' && <ComponentStyle />
            }
            {
                key === '事件' && <ComponentEvent />
            }
        </div>
    </div>
}
